<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/login.css" />
    <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
    <script src="../../js/vue-v2.6.10.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
    <script src="../../element-ui-2.13.0/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <div class="pos">
            <div class="login">
                <span class="close iconfont icon-close"></span>
                <img src="../../img/login/loginlogo.png" alt="">
                <ul>
                    <li></li>
                    <li class="phone" style="color: red;" v-text="msg"></li>
                    <li></li>
                </ul>
                <form action="" id="form">
                    <input type="text" class="tel" id="" placeholder="请输入您的手机号" v-model="data.phone" @blur="checkPhone">
                    <input type="password" class="pass" id="" placeholder="请输入密码" v-model="data.password"
                        @blur="checkPassword">
                    <em></em>
                    <div class="loginbtn" style="margin-left: 110px;line-height: 40px;" @click="login">
                        登陆
                    </div>
                </form>
                <p>
                    <span><a href="javascript:;">忘记密码</a></span>
                    <span>
                        还没有账号?
                        <a href="../loginAndRegister/register.html">点击注册</a>
                    </span>
                </p>
                <ul>
                    <li></li>
                    <li class="phone">使用第三方软件登录</li>
                    <li></li>
                </ul>
                <p class="getCenter">
                    <img src="../../img/login/wx.png" alt="">
                    <img src="../../img/login/qq.png" alt="">
                    <img src="../../img/login/sina.png" alt="">
                </p>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: '',
            data: {
                phone: "",
                password: ""
            }
        },
        methods: {
            checkPhone() {
                if (this.data.phone == null || this.data.phone.trim() == '') {
                    this.msg = "请输入手机号！";
                } else {
                    var reg = /^1[3|5|7|8|9][0-9]{9}$/;
                    if (reg.test(this.data.phone)) {
                        axios.post('http://192.168.194.223:8080/edu/user?flag=checkPhone&phone=' + this.data.phone).then(obj => {
                            if (obj.data) {
                                this.msg = "该手机号还未注册！";
                            } else {
                                this.msg = "";
                            }
                        });
                    } else {
                        this.msg = "请输入正确的手机号";
                    }
                }
            },
            checkPassword() {
                if (this.data.password == null || this.data.password.trim() == '') {
                    this.msg = "请输入密码";
                } else {
                    this.msg = "";
                }
            },
            checkMsg() {
                if (this.msg == null || this.msg.trim() == '') {
                    return true;
                } else {
                    return false;
                }
            },
            login() {
                this.checkPhone();
                if (this.checkMsg()) {
                    this.checkPassword();
                    if (this.checkMsg()) {
                        axios.post('http://192.168.194.223:8080/edu/user?flag=userLogin&phone='
                            + this.data.phone + '&pwd=' + this.data.password).then(res => {
                                if(res.data.status==1){
                                    sessionStorage.setItem("user",JSON.stringify(res.data.data));
                                    this.$message.success(res.data.message);
                                    setTimeout("location.href = '../../index.html'", 1000);
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            });
                    }
                }
            }
        },
        created() {

        },

    })
</script>


</html>